<template>
  <div :style="bottomStaySpace()" class="wrap">
    <div class="header">
      <div class="flex_cen_cen">
        <Image v-if="followRecordsDetails.status === 0" name="submit_success" oss size="110" type="png" />
        <Image v-if="followRecordsDetails.status === 1" name="review_reject" oss size="110" type="png" />
      </div>
      <div class="mt16">{{ followRecordsDetails.status === 0 ? '已通过' : '已驳回' }}</div>
    </div>
    <div class="space" />
    <div class="main">
      <div class="item">
        <span class="title">跟进方式</span>
        <span class="text">{{ followRecordsDetails.wayName }}</span>
      </div>
      <div class="item">
        <span class="title">服务类型</span>
        <span class="text">
          <span v-for="(item, index) in followRecordsDetails.wayDetailName" :key="index">
            {{ item }}{{ index < followRecordsDetails.wayDetailName?.length - 1 ? ' | ' : '' }}
          </span>
        </span>
      </div>
      <div class="item">
        <span class="title">服务时间</span>
        <span class="text">{{ followRecordsDetails.serviceTime }}</span>
      </div>
      <div class="item">
        <span class="title">服务地点</span>
        <span class="text">{{ followRecordsDetails.province }}-{{ followRecordsDetails.city }}-{{ followRecordsDetails.district }}</span>
      </div>
      <div class="item">
        <span class="title">服务记录</span>
        <span class="text">{{ followRecordsDetails.content }}</span>
      </div>
      <div class="item">
        <span class="title" />
        <div class="flex_start_cen flex_wrap">
          <div v-for="(item, index) in followRecordsDetails.attachment" :key="index" class="file">
            <Image :name="item" overspread size="160" />
          </div>
        </div>
      </div>
    </div>
    <div :style="keepBottomSafeDis()" class="suction_bottom_btn">
      <Button :styles="{marginRight: '38rpx'}" size="N" type="solid" @confirm="Router.back()">返回</Button>
      <Button size="N" @confirm="Router.push('add_follow_records', {followInfo: JSON.stringify(followRecordsDetails), wayText: 'update'})">修改</Button>
    </div>
  </div>
</template>
<script lang="ts" setup>

import Image from '@C/Image.vue'
import { bottomStaySpace, keepBottomSafeDis, onLoad, onShow, Router } from '@U/common'
import { weixinSubscription } from '@U/Auth'
import Button from '@C/Button.vue'
import { ref } from 'vue'
import { getFollowRecordsDetails } from './request'

onLoad((option: any) => {
  getFollowRecordsDetailsFn(option.id)
})
const followRecordsDetails = ref({})
const getFollowRecordsDetailsFn = async (id: string) => {
  const { code, data } = await getFollowRecordsDetails({ id }).finally(() => {})
  if (code === 200) {
    followRecordsDetails.value = data
  }
}
onShow(() => {
  weixinSubscription()
})
</script>

<style lang="less" scoped>
.wrap {
  background-color: #fff;
  .header {
    border-top: 2rpx solid #f2f2f7;
    text-align: center;
    padding: 26rpx 0;
  }
  .space {
    height: 24rpx;
    background: #f2f2f7;
  }
  .main {
    padding: 26rpx 40rpx 0 48rpx;
    .item {
      display: flex;
      margin-bottom: 28rpx;
      .title {
        display: inline-block;
        min-width: 102rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0,0,0,0.45);
        line-height: 40rpx;
        margin-right: 52rpx;
      }
      .text {
        display: inline-block;
        width: 498rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0,0,0,0.85);
        line-height: 40rpx;
      }
      .file {
        width: 160rpx;
        height: 160rpx;
        border-radius: 20rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
      }
    }
  }
}
</style>
